<template>
    <div class="edit-form-wrapper">
      <!-- 表单 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- ID输入框 -->
        <el-form-item label="ID">
          <el-input v-model="ruleForm.id" readonly></el-input>
        </el-form-item>
        <!-- 姓名输入框 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- 性别下拉框 -->
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="沃尔玛购物袋" value="沃尔玛购物袋"></el-option>
          </el-select>
        </el-form-item>
  
        <!-- 出生日期输入框 -->
        <el-form-item label="出生日期" prop="brithday">
          <el-input v-model="ruleForm.brithday" placeholder="请输入出生日期"></el-input>
        </el-form-item>
  
        <!-- 死亡日期输入框 -->
        <el-form-item label="死亡日期" prop="deadday">
          <el-input v-model="ruleForm.deadday" placeholder="请输入死亡日期"></el-input>
        </el-form-item>
  
        <!-- 照片上传 -->
        <el-form-item label="照片" prop="image">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/people/file/addFile"
              :show-file-list="false"
              :on-success="onSuccess"
              v-model="ruleForm.image"
              :before-upload="beforeUpload">
            <!-- 如果有照片则展示照片，否则展示上传按钮 -->
            <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
  
        <!-- 父节点下拉框 -->
        <el-form-item label="父节点" prop="parentId">
          <el-select v-model="ruleForm.parentId" placeholder="请选择父节点">
            <el-option v-for="item in dormitoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- 确定和重置按钮 -->
          <el-button type="success" @click="submitForm('ruleForm')">立即修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        category: null,
        ruleForm: {
          sex: '',
          name: '',
          image: '',
          parentId: ''
        },
        dormitoryList: '',
        rules: {
          sex: [
            { required: true, message: '请输入性别', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          brithday: [
            { required: true, message: '请输入出生日期', trigger: 'blur' }
          ],
          deadday: [
            { required: true, message: '请输入死亡日期', trigger: 'blur' }
          ],
          image: [
            { required: true, message: '请上传照片', trigger: 'blur' }
          ],
          parentId: [
            { required: true, message: '请选择父节点', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      // 提交表单
      submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.put('http://localhost:8081/people/update', _this.ruleForm).then(function (resp) {
              if (resp.data.code == 0) {
                _this.$alert(_this.ruleForm.name + '修改成功', '', {
                  confirmButtonText: '确定',
                  callback: () => {
                    _this.$router.push('/peopleManager')
                  }
                });
              }
            })
          }
        });
      },
      // 文件上传成功后回调函数
      onSuccess(response) {
        // response 就是图片上传成功后返回的信息，名字可以任意，例如res,还有其他参数，具体使用可以查阅element的官网el-upload组件的介绍
        this.ruleForm.image = response.data;
      },
      // 文件上传前的操作
      beforeUpload(file) {
        // 在上传之前可以进行一些操作，例如验证文件类型、大小等
        const isJPG = file.type === 'image/jpg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created() {
      const _this = this
      // 获取父节点列表
      this.$http.get('http://localhost:8081/people/allList').then(function (resp) {
        _this.dormitoryList = resp.data.data
      })
      // 根据ID获取表单数据
      this.$http.get('http://localhost:8081/people/findById/' + _this.$route.query.id).then(function (resp) {
        _this.ruleForm = resp.data.data
      })
    }
  }
  </script>
  
  <style>
  .edit-form-wrapper {
    margin-top: 60px;
    margin-left: 330px;
    width: 300px;
    height: 600px;
    border: 0px solid red;
    padding-right: 68px;
    padding-top: 50px;
    background-color: rgba(146, 205, 255, 0.89); /* 背景框背景颜色 */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(108, 54, 54, 0.1);
  }
  </style>